import React, { useEffect, useState } from 'react';
import styles from './style/index.module.less';
import { Descriptions , Select, TableColumnProps, Card, Space, Button,Drawer, Notification  } from '@arco-design/web-react';

import { ReadOneSync } from '@/store/sync';
import { ReadOneDatasource } from '@/store/datasource';

function Step0(props) {
  const [fromDb,setFromDb] = useState([])
  const [toDb,setToDb] = useState([])

  useEffect(() => {
    initData()
  }, [props]);
  const initData = ()=>{
    let from = props?.input?.from
    if(!from){
      return
    }
    let fromArr = [
      {
        label: '名称',
        value: from.name,
      },
      {
        label: '主机名',
        value: from.host,
      },
      {
        label: '端口',
        value: from.port,
      },
      {
        label: '数据库',
        value: from.database,
      },
    ]
    setFromDb(fromArr)

    let to = props.input.to
    let toArr = [
      {
        label: '名称',
        value: to.name,
      },
      {
        label: '主机名',
        value: to.host,
      },
      {
        label: '端口',
        value: to.port,
      },
      {
        label: '数据库',
        value: to.database,
      },
    ]
    setToDb(toArr)
  }
  return (
   <>
     <Descriptions colon=' :' layout='horizontal' title='源数据库' data={fromDb} />
     <Descriptions colon=' :' layout='horizontal' title='目标数据库' data={toDb} />     
   </>
  );
}

export default Step0;
